<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />

    <div class="card-options">
      <div class="header"><span>可视域分析</span></div>
      <div class="body">
        <div class="btns">
          <a class="btn" :class="{ disabled: doAdding }" @click="handleAdd">添加可视域</a>
          <a class="btn" @click="handleDelete">清除可视域</a>
        </div>
      </div>
    </div>

    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
  </div>
</template>

<script>
//参考：
// https://blog.csdn.net/fywindmoon/article/details/108415116
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, onMounted, h } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '../utils/mousePosition.js';
import ViewShed from './ViewShed.js';

export default defineComponent({
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      nowPostion: {},
      viewShed: null,
      doAdding: false
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    handleAdd() {
      let vm = this;
      vm.viewShed.doAdd(finished => {
        vm.doAdding = finished;
      });
    },
    handleDelete() {},
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });

      vm.viewShed = new ViewShed(viewer, {});
    },
    initViewer() {
      let vm = this;
      // Grant CesiumJS access to your ion assets
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      var rectangle = new Cesium.Rectangle(
        Cesium.Math.toRadians(5.9993076),
        Cesium.Math.toRadians(-0.00025749207),
        Cesium.Math.toRadians(7.00078),
        Cesium.Math.toRadians(1.001215)
      );

      var terrainProvider = Cesium.createWorldTerrain();
      var viewer = new Cesium.Viewer('cesium-drawer', {
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        // imageryProvider: imgTileServiceImageryProviderCreator(),
        selectionIndicator: false,
        infoBox: false,
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        terrainProvider
      });
      this.viewer = viewer;

      viewer.scene.globe.depthTestAgainstTerrain = true;

      // viewer.scene.camera.flyTo({ destination: rectangle });

      // // Zoom in to an area with mountains
      // viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0), new Cesium.Cartesian3(5000.0, 5000.0, 5000.0));
      // viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

      // viewer.scene.camera.flyTo({
      //   destination: new Cesium.Cartesian3(-548184.7982559408, 5512367.059463563, 3173625.2210259973),
      //   orientation: {
      //     heading: 5.683499859605618,
      //     pitch: -0.3430291183891061,
      //     roll: 6.281444671468591
      //   }
      // });

      viewer.camera.setView({
        destination: new Cesium.Cartesian3(-548184.7982559408, 5512367.059463563, 3173625.2210259973),
        orientation: {
          heading: 5.683499859605618,
          pitch: -0.3430291183891061,
          roll: 6.281444671468591
        }
      });

      this.onViewerInited(viewer);
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  .card-options {
    position: absolute;
    top: 85px;
    left: 7px;
    width: 240px;
    line-height: 16px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    z-index: 99;

    .header {
      padding: 5px 12px;
      line-height: 1.5em;
      font-weight: bold;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .body {
      width: 100%;
      height: 5em;
      padding: 12px;

      .btns {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        a {
          text-align: center;
          width: 45%;
          padding: 5px 7px;
          border: 1px solid rgba(0, 255, 255, 0.4);
          transition: all 500ms;
          &:hover {
            border-color: rgba(0, 255, 255, 0.8);
          }
          &.disabled {
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: rgba(255, 255, 255, 0.4);
            cursor: default;
          }
        }
      }
    }
  }

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
</style>
